<template>
  <div>
    <div class="addzs_tk">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
      <div class="addzs_from">
        <ul>
          <li>
            <span class="inp_tit">单位名称：</span>
            <a-select
              showSearch
              allowClear
              placeholder="请选择客户"
              optionFilterProp="children"
              style="width: 300px"
              @search="dwmcSearch"
              @change="dwmcChange"
              notFoundContent="未找到您搜索的内容"
            >
              <a-select-option
                v-for="(item,i) in jjkhlist"
                :key="i"
                class="acgsmc"
                :value="item.GSMC"
                @click="getsqdwid(item.SQDWID)"
                :data-sqdwid="item.SQDWID"
              >{{item.GSMC}}</a-select-option>
            </a-select>
          </li>
          <li>
            <span class="inp_tit">证书名称：</span>
            <a-input placeholder="请输入证书名称" v-model="LicenseName" />
          </li>
          <li>
            <span class="inp_tit">发证机构：</span>
            <a-input placeholder="请输入发证机构" v-model="LicenseOrgan" />
          </li>
          <!-- <li>
            <span class="inp_tit">发证时间：</span>
            <a-date-picker @change="dateChange" placeholder="请输入发证时间" />
          </li>-->
          <li>
            <span class="inp_tit">证书图片：</span>
            <!-- <a-input placeholder="请输入证书图片" /> -->
            <div class="clearfix">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
              >
                <div v-if="fileList.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </li>
          <li>
            <a-button @click="subcz">重置</a-button>
            <a-button type="primary" @click="subqyzs">提交</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
import qs from "qs";
export default {
  data() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [],
      jjkhlist: [],
      LicenseName: "",
      LicenseOrgan: "",
      //   LicenseData:'',
      bearingid: "",
      gsmc: ""
    };
  },

  methods: {
    dwmcChange(value) {
      console.log(`selected ${value}`);
      $(".ant-select-selection-selected-value").show();
      $(".ant-select-selection__placeholder").hide();
    },
    getsqdwid(id) {
      this.bearingid = id;
      console.log(id);
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(fileList);
    },
    close() {
      this.$parent.addqyflag = false;
    },
    dwmcSearch(value) {
      this.getkhmc(value);
    },
    //客户名称
    getkhmc(value) {
      this.axios
        .post("yangben/SelectYbGsmc.php", qs.stringify({ gsmc: value }))
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.jjkhlist = res.data.result;
          } else if (res.data.result == null) {
            this.jjkhlist = [];
          }
        });
    },

    subqyzs() {
      if (this.fileList.length) {
        this.LicenseAdd = this.fileList[0].thumbUrl;
      }
      this.axios
        .post(
          "zhengjian/addZhengjian.php",
          qs.stringify({
            bearingid: this.bearingid,
            LicenseName: this.LicenseName,
            LicenseAdd: this.LicenseAdd,
            LicenseOrgan: this.LicenseOrgan
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
            this.$parent.getzhengjianList(this.$parent.pagination);
            this.$parent.addqyflag = false;
          } else {
            this.$notification["error"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    // dwmcdeselect(value){
    //     console.log(value)
    //     console.log('111111111111')

    // },
    subcz() {
      this.bearingid = "";
      this.LicenseName = "";
      this.LicenseAdd = "";
      this.fileList = [];
      this.LicenseOrgan = "";
      $(".ant-select-selection-selected-value").hide();
      $(".ant-select-selection__placeholder").show();

      //   console.log($(".acgsmc").text())
      //   this.getkhmc()
      //   this.jjkhlist=[]
      //   console.log(  this.jjkhlist)
    }
  },

  created() {
    this.getkhmc();
  }
};
</script>

<style lang='less'>
.addzs_tk {
  width: 50%;
  height: 460px;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  .addzs_from {
    padding: 20px 50px;
    text-align: left;
    ul {
      li {
        margin: 15px 0;
        input {
          width: 300px;
        }
        .clearfix {
          display: inline-block;
          vertical-align: top;
        }
        button {
          width: 100px;
          margin: 20px;
        }
      }
    }
  }
}
</style>
